<template>
	<el-drawer v-model="control.visible" :with-header="false" :direction="control.direction"
		:before-close="public_close">
		<div class="xp-block-banner">
			<div class="xp-title">{{control.form.code}} {{control.form.name}}</div>
			<div class="xp-content">工作流是在不同的状态下流转</div>
		</div>
		<div class="xp-block-conent">
			<el-form ref="form" :model="control.form" :rules="control.rules" label-position="top">
				<el-form-item label="状态编码" prop="code">
					<el-input v-model="control.form.code" autocomplete="off" placeholder="请输入" size="large" />
				</el-form-item>
				<el-form-item label="状态名称" prop="name">
					<el-input v-model="control.form.name" autocomplete="off" placeholder="请输入" size="large" />
				</el-form-item>
				<el-form-item label="按钮配置" prop="name" v-if="!sp.isFstatusBeginNode&&!sp.isFstatusEndNode">
					<el-row>
						<el-col :span="2"></el-col>
						<el-col :span="8">按钮名称</el-col>
						<el-col :span="6">字体</el-col>
						<el-col :span="6">背景</el-col>
					</el-row>
					<draggable v-model="control.form.buttons" item-key="id" :animation="340" group="buttongroup"
						handle=".option-drag">
						<template #item="{element}">
							<el-row>
								<el-col :span="2">
									<div class="operate-icon option-drag">
										<el-icon :size="16">
											<Fold />
										</el-icon>
									</div>
								</el-col>
								<el-col :span="8">
									<el-input v-model="element['name']" />
								</el-col>
								<el-col :span="6">
									<el-color-picker v-model="element['color']" />
								</el-col>
								<el-col :span="6">
									<el-color-picker v-model="element['bgcolor']" />
								</el-col>
							</el-row>
						</template>
					</draggable>
				</el-form-item>
				<el-form-item label="审核退回的状态" prop="rejecttype" v-if="!sp.isFstatusBeginNode&&!sp.isFstatusEndNode">
					<el-select v-model="control.form.rejecttype" placeholder="请选择" style="width: 45%">
						<el-option v-for="item in data.rejecttypeList" :key="item.code" :label="item.name"
							:value="item.code" />
					</el-select>
					<el-select v-model="control.form.rejecttype_to_typefstatus_id" placeholder="请选择" style="width: 45%"
						v-if="control.form.rejecttype=='to'">
						<el-option v-for="item in data.xcflowjson.fstatusList" :key="item.id" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="审核人指派" prop="assigneetype" v-if="!sp.isFstatusBeginNode&&!sp.isFstatusEndNode">
					<el-select v-model="control.form.assigneetype" placeholder="请选择" style="width: 45%">
						<el-option v-for="item in data.assigneetypeList" :key="item.code" :label="item.name"
							:value="item.code" />
					</el-select>
					<xc-el-select-pagination v-if="control.form.assigneetype=='admin'"
						v-model="control.form.assigneetype_admin_id" @loadData="userControl_loadData"
						:options="userControl.options" optionLabel="nickname" optionValue="id"
						:totalpage="userControl.totalpage"></xc-el-select-pagination>
					<el-select v-model="control.form.assigneetype_role_id" placeholder="请选择" style="width: 45%"
						v-if="control.form.assigneetype=='role'">
						<el-option v-for="item in data.roleList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
					<el-select v-model="control.form.assigneetype_adminfieldcode" placeholder="请选择" style="width: 45%"
						v-if="control.form.assigneetype=='adminfield'">
						<section v-for="item in data.xcflowFields">
							<el-option v-if="item.fieldjsonObj.__config__.tag=='xcform_control_objselect'"
								:key="item.fieldcode" :label="item.title" :value="item.fieldcode" />
						</section>
					</el-select>
					<section>
						<el-select v-model="control.form.assigneetype_objselect_flowfieldcode" placeholder="请选择"
							style="width: 150px" v-if="control.form.assigneetype=='objselectfield'">
							<el-option v-for="item in data.xcflowFields" :key="item.fieldcode" :label="item.title"
								:value="item.fieldcode" />
						</el-select>

						<el-select v-model="control.form.assigneetype_objselect_relateadminfieldcode" placeholder="请选择"
							style="width: 150px" v-if="control.form.assigneetype=='objselectfield'"
							@visible-change="control_selectTableFields_visible"
							:remote-method="control_selectTableFields">
							<el-option v-for="item in sr.tablefields" :key="item.name"
								:label="control.form.assigneetype_objselect_flowfieldcode+': '+item.name"
								:value="item.name" />
						</el-select>
					</section>
				</el-form-item>
				<el-form-item label="审核通过后的状态" prop="pass_fstatus_id" v-if="false&&!sp.isFstatusEndNode">
					<el-select v-model="control.form.pass_fstatus_id" placeholder="请选择" style="width: 100%">
						<el-option v-for="item in data.xcflowjson.fstatusList" :key="item.id" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="字段配置" prop="buttons" v-if="!sp.isFstatusBeginNode&&!sp.isFstatusEndNode">
					<el-row>
						<el-col :span="7">字段名</el-col>
						<el-col :span="5">显示</el-col>
						<el-col :span="6">审核补充</el-col>
						<el-col :span="6">审核必填</el-col>
					</el-row>
					<el-row v-for="item in data.xcflowFields">
						<template v-if="item.type=='user_field'">
							<el-col :span="7">{{item.title}}</el-col>
							<el-col :span="5"><xc-el-single-checkbox
									v-model="control.form.config_fields[item['__vModel__']]['show']" /></el-col>
							<el-col :span="6"><xc-el-single-checkbox v-if="item['fieldcode']"
									v-model="control.form.config_fields[item['__vModel__']]['edit']" /></el-col>
							<el-col :span="6"><xc-el-single-checkbox v-if="item['fieldcode']"
									v-model="control.form.config_fields[item['__vModel__']]['required']" /></el-col>
						</template>

					</el-row>
				</el-form-item>
				<el-form-item label="审核通过是否填写意见" prop="need_tracecontent"
					v-if="!sp.isFstatusBeginNode&&!sp.isFstatusEndNode">
					<el-switch v-model="control.form.need_tracecontent" inline-prompt />
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="public_close">取消</el-button>
				<el-button type="primary" @click="control_submit">保存</el-button>
			</div>
		</template>
	</el-drawer>
</template>
<script>
	import config from "@/config/config.js";
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';
	import draggable from 'vuedraggable';
	import * as ElementPlusIconsVue from '@element-plus/icons-vue'

	export default {
		props: {
			modelValue: {
				type: Object,
				default: []
			},
			data: {
				type: Object,
				default: {}
			},
		},
		watch: {
			'data': {
				handler(newVal, oldVal) {
					let that = this;
				},
			},
			//control.form.assigneetype_objselect_flowfieldcode
			'control.form.assigneetype_objselect_flowfieldcode': {
				handler(newVal, oldVal) {
					let that = this;
					if (newVal != oldVal && oldVal != null) {
						that.control.form.assigneetype_objselect_relateadminfieldcode = null;
					}
				},
			},
			// 'control.form.assigneetype_objselecttable': {
			// 	handler(newVal, oldVal) {
			// 		let that = this;
			// 		if (newVal != oldVal) {
			// 			that.control.form.assigneetype_objselect_relateadminfieldcode = null;
			// 		}
			// 	},
			// }
		},
		components: {
			draggable,
		},
		data() {
			return {
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {
					clickFstatusId: null,
					clickFstatusIndex: null,
					clickFlogicIndex: null,
					callbackFunc: null,
					isFstatusBeginNode: false,
					isFstatusEndNode: false,
				},
				sr: {
					tables: [],
					tablefields: [],
				},
				userControl: {
					options: [],
					totalpage: 0,
				},
				roleControl: {
					options: [],
				},
				control: {
					visible: false,
					direction: 'rtl',
					form: {
						id: null,
						name: null,
						code: null,
						pass_fstatus_id: null,
						buttons: [],
						rejecttype: null,
						rejecttype_to_typefstatus_id: null,
						assigneetype: null,
						assigneetype_admin_id: null,
						assigneetype_role_id: null,
						assigneetype_adminfieldcode: null,
						assigneetype_objselect_flowfieldcode: null,
						// assigneetype_objselecttable: null,
						assigneetype_objselect_relateadminfieldcode: null,
						// assigneetype_field: null,
						assigneetype_logic: null,
						config_fields: {},
						need_tracecontent: true,
					},
					rules: {
						code: {
							required: true,
						},
						name: {
							required: true,
						},
						assigneetype: {
							required: true,
						},
						rejecttype: {
							required: true,
						},
						pass_fstatus_id: {
							required: true,
						},
						flogicjson: {
							required: true,
						}
					},
				},
			}
		},
		created() {
			let that = this;
			that.xinit();
		},
		methods: {
			xinit() {
				let that = this;
			},
			public_show(clickFstatusId, callbackFunc) {
				let that = this;
				that.control.visible = true;
				that.sp.clickFstatusId = clickFstatusId;
				that.sp.callbackFunc = callbackFunc;

				that.sp.clickFstatusIndex = xsArrayUtils.indexOfByObjectKey(that.data.xcflowjson.fstatusList, 'id',
					clickFstatusId);
				let fstatus = that.data.xcflowjson.fstatusList[that.sp.clickFstatusIndex];
				if (fstatus.id == that.data.xcflowjson.fstatusBeginId) {
					that.sp.isFstatusBeginNode = true;
				} else {
					that.sp.isFstatusBeginNode = false;
				}
				if (fstatus.id == that.data.xcflowjson.fstatusEndId) {
					that.sp.isFstatusEndNode = true;
				} else {
					that.sp.isFstatusEndNode = false;
				}

				for (let index in that.data.xcflowjson.flogicList) {
					let item = that.data.xcflowjson.flogicList[index];
					if (xsArrayUtils.contains(["all", "other"], item.logictype) && item.flowfstatus_id == fstatus.id) {
						that.sp.clickFlogicIndex = index;
						break;
					}
				}
				let flogic = that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex];
				xcHttpUtils.row2form(flogic, that.control.form);

				that.control.form.id = fstatus.id;
				that.control.form.name = fstatus.name;
				that.control.form.code = fstatus.code;

				// if none then default config_fields
				let config_fields = {};
				for (let index in that.data.xcflowFields) {
					let item = that.data.xcflowFields[index];
					// let fieldcode = item['fieldcode'];
					let fieldvmodel = item['fieldjsonObj']['__vModel__'];

					let vv = null;
					if (flogic.config_fields != null && flogic.config_fields[fieldvmodel] != null) {
						vv = flogic.config_fields[fieldvmodel];
					} else {
						vv = {
							show: "Y",
							edit: "N",
							required: "N"
						};
					}
					config_fields[fieldvmodel] = vv;
					// that.$set(that.control.form.config_fields, fieldvmodel, vv);
				}
				that.control.form.config_fields = config_fields;

			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			public_close() {
				let that = this;
				that.control.visible = false;
			},
			control_submit() {
				let that = this;
				that.$refs.form.validate().then(res => {
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["pass_fstatus_id"] = that.control
						.form[
							"pass_fstatus_id"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["rejecttype"] = that.control.form[
						"rejecttype"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["rejecttype_to_typefstatus_id"] =
						that
						.control.form["rejecttype_to_typefstatus_id"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["assigneetype_admin_id"] = that
						.control
						.form["assigneetype_admin_id"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["assigneetype_role_id"] = that
						.control
						.form["assigneetype_role_id"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["assigneetype_adminfieldcode"] = that
						.control
						.form["assigneetype_adminfieldcode"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex][
							"assigneetype_objselect_flowfieldcode"
						] = that
						.control
						.form["assigneetype_objselect_flowfieldcode"];
					// that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["assigneetype_objselecttable"] = that
					// 	.control
					// 	.form["assigneetype_objselecttable"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex][
							"assigneetype_objselect_relateadminfieldcode"
						] = that
						.control
						.form["assigneetype_objselect_relateadminfieldcode"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["assigneetype"] = that.control.form[
						"assigneetype"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["assigneetype_logic"] = that.control
						.form[
							"assigneetype_logic"];

					that.data.xcflowjson.fstatusList[that.sp.clickFstatusIndex]["name"] = that.control.form[
						"name"];
					that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["config_fields"] = that.control
						.form.config_fields;
					//that.data.xcflowjson.flogicList[that.sp.clickFlogicIndex]["config_fields"] = [{a:'1'}];

					that.public_close();
					that.sp.callbackFunc();
				});
			},
			userControl_loadData(query) {
				let that = this;
				xcHttpUtils.get("csmitsm/xc_flow/queryTabledataList", {
					"pageNumber": 1,
					"tablename": "__PREFIX__admin",
					"showfields": "id,nickname",
					"filterfields": "nickname",
					"filtervalue": query
				}, function(res) {
					that.userControl.totalpage = res.totalpage;
					that.userControl.options = res.list;
				});
			},
			control_addButton() {
				let that = this;
				that.control.form.buttons.push({
					"code": "btn-" + that.control.form.buttons.length + 1,
					"name": "",
					"color": "#000000",
					"bgcolor": "#ffffff",
					"type": "custom"
				});
			},
			// control_selectTable() {
			// 	let that = this;
			// 	xcHttpUtils.get("csmitsm/xc_flow/queryDataTables", {}, function(res) {
			// 		that.sr.tables = res.list;
			// 	});
			// },
			// control_selectTable_visible(visible) {
			// 	let that = this;
			// 	if (visible) {
			// 		that.control_selectTable();
			// 	}
			// },
			control_selectTableFields() {
				let that = this;
				let fieldrowindex = xsArrayUtils.indexOfByObjectKey(that.data.xcflowFields, 'fieldcode', that.control.form
					.assigneetype_objselect_flowfieldcode);
				let fieldrow = that.data.xcflowFields[fieldrowindex];
				xcHttpUtils.get("csmitsm/xc_flow/queryFieldsByTableName", {
					// tablename: that.control.form.assigneetype_objselecttable
					tablename: fieldrow['fieldjsonObj']['xcform_base_selecttablefield']['tablename']
				}, function(res) {
					that.sr.tablefields = res.list;
				});
			},
			control_selectTableFields_visible(visible) {
				let that = this;
				if (visible) {
					that.control_selectTableFields();
				}
			}
		}
	}
</script>

<style lang="scss">
	.xp-block-banner {
		padding: $uni-spacing-col-base;
		background-color: $uni-color-primary;
		height: 160px;
		width: 100%;
		color: #FFFFFF;
		text-align: center;

		.xp-title {
			padding-top: 40px;

			font-size: $uni-font-size-subtitle;
		}

		.xp-content {
			font-size: $uni-font-size-base;
			padding: $uni-spacing-col-lg;

		}
	}

	.xp-block-conent {
		padding: $uni-img-size-sm;

		.xp-flogic-tabs>.el-tabs__content {
			padding: 32px;
			color: #6b778c;
			font-size: 32px;
			font-weight: 600;
		}

		.xp-flogic-tabs .custom-tabs-label .el-icon {
			vertical-align: middle;
		}

		.xp-flogic-tabs .custom-tabs-label span {
			vertical-align: middle;
			margin-left: 4px;
		}
	}

	.el-form-item__content div {
		width: 100%;
	}

	.el-row {
		width: 100%;
		text-align: center;
	}

	.el-row:first-child {
		margin-bottom: 0;
		font-weight: bold;
		border-top: 1px solid $uni-border-color;
		border-bottom: 1px solid $uni-border-color;
	}

	.el-row:last-child {
		border-bottom: 1px solid $uni-border-color;
	}


	.select-item {
		display: flex;
		border: 1px dashed #fff;
		box-sizing: border-box;

		& .close-btn {
			cursor: pointer;
			color: #f56c6c;
		}

		& .el-input+.el-input {
			margin-left: 4px;
		}
	}

	.select-item+.select-item {
		margin-top: 4px;
	}

	.select-item.sortable-chosen {
		border: 1px dashed #409eff;
	}

	.option-drag {
		cursor: move;
	}

	.operate-icon {
		line-height: 40px;
	}
</style>